This splits the Flight implementation into a general JSON chunk part and a streaming part. The default implementation goes to a binary/string stream API which varies between Node and W3C streams. The Relay implementation by-passes the serialization and instead gets passed JSON-serializable object chunks.

The server configs are layered like this:

• ReactFlightServer
  • ReactFlightServerConfig
    • ReactFlightServerConfigStream
      • ReactServerStreamConfig
        • ReactServerStreamConfigNode
        • ReactServerStreamConfigBrowser
    • ReactFlightDOMRelayServerHostConfig

The client is a bit simpler. The implementation just imports ReactFlightClient (used by Relay) or ReactFlightClientStream (used by Streams).

Flight Relay Server Bindings

The API for the server is:

function render(model: ReactModel, destination: Destination): void;

The first argument is something that can be returned from a Block. I.e. the root model. Something JSONable. This will change to require a Block. The second argument is whatever Relay wants to the target to be.

This also depends on an external file that we'll have to add to www: ReactFlightDOMRelayServerIntegration.js. This will needs to implement the following API:

 opaque type Destination;
 function emitModel(
    destination: Destination,
    id: number,
    json: JSONValue,
  ): void;
 function emitError(
    destination: Destination,
    id: number,
    message: string,
    stack: string,
  ): void;
function close(destination: Destination): void;

This will be called asynchronously as ReactFlight completes part of the model. Once there's no more to render, it'll call close() on the destination. Relay can then serialize these rows as it wants.

Flight Relay Client Bindings

The client API is:

function createResponse(): Response;
function getModelRoot<T>(response: Response): {model: T};
function resolveModel(
  response: Response,
  id: number,
  json: JSONValue,
): void;
function resolveError(
  response: Response,
  id: number,
  message: string,
  stack: string,
): void;
function close(response: Response): void;

To use this, you first have to create a "response". You can get a model out of the response which will just have placeholders in it. This particular API will change as I get rid of "proxies". It’ll return a Block instead. The principle is that it can return something even before any data has loaded so you immediately get something that can suspend.

The resolveModel and resolveError are called as new rows stream in. close should be called when there's no more rows or the connection dies (even if it dies early).